<template>
  <el-table
    v-loading="loading"
    ref="table"
    :data="tableData"
    border
    stripe
    :cell-style="cellStyle"
    :header-cell-style="headerCellStyle"
    @selection-change="handleSelectionChange"
    @row-click="RowClick"
    :row-style="rowState"
    :row-key="(row) => row.id"
    :max-height="maxHeight"
    :height="height"
    empty-text="无数据"
  >
    <el-table-column
      v-for="column in columns"
      :key="column.prop || column.type"
      :type="column.type"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
      :align="column.align"
      :fixed="column.fixed"
    >
      <!-- 您可以在此处为每列添加任何额外的定制或插槽内容 -->
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import {
  ref,
  watch,
  reactive,
  onMounted,
  onBeforeMount,
  computed,
  nextTick,
  onUnmounted,
  toRefs,
} from "vue";
import { Delete, Edit, Search, Share, Upload, Calendar } from "@element-plus/icons-vue";
import {
  ElTable,
  TableColumnCtx,
  ElButton,
  ElDialog,
  dialogEmits,
  ElMessage,
  FormRules,
  FormInstance,
} from "element-plus";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import axios from "../../axios/axiosInstance";
import Cookies from "js-cookie";
import { format } from "date-fns";
// import * as jsPDF from 'jspdf';

// 日期中文
import zhCn from "element-plus/dist/locale/zh-cn.mjs";

const props = defineProps({
  columns: {
    type: Array,
    required: true,
  },
});

const table = ref();
const selectedRows = ref([]);
const loading = ref(false);
const tableData = ref([]);
const cellStyle = ref({}); // 定义您的单元格样式对象
// 定义您的表头单元格样式对象
const rowKey = ref((row) => row.id);
const maxHeight = ref(null); // 根据需要进行调整
const height = ref(null); // 根据需要进行调整

// 根据您的需求添加更多属性和方法
const headerCellStyle = {
  // E9E9E7
  borderColor: "#B9C9C7",
  backgroundColor: "#F2F4FA", // 表头背景颜色
  fontWeight: "bold", // 表头文字粗细
  color: "#1F2129",
  // padding: "0 0 0 30px",
};
const handleSelectionChange = (val) => {
  selectedRows.value = val;
  console.log("选中项变化：", val);
};

const handleRowClick = (row) => {
  // 处理行双击
};

const RowClick = (row, selection) => {
  table.value.toggleRowSelection(row);
};

const rowState = (arg) => {
  return {
    height: "20px", // 设置合适的行高值
    fontSize: "12px", // 设置合适的字体大小值
    // color: "black",
  };
};

// 您可以导出需要从外部访问的任何属性或方法
</script>

<style scoped>
/* 在此处添加组件特定的样式 */
</style>
